<template>
 <div class="table-box">
    <table v-for="items in postlist">
      <tr>
        <td>栏目</td>
        <td v-for="item in tableData1">
          {{item.name}}
        </td>
        <td v-for="item in tableData">
          {{item.name}}
        </td>
      </tr>
      <tr>
          <td>电流(A)</td>
          <td v-for="item in tableData1">
            {{item.current}}
          </td>
          <td rowspan="2" v-for="item in tableData">
            {{item.value}}
          </td>
      </tr>
      <tr>
          <td>电压(V)</td>
          <td v-for="item in tableData1">
            {{item.Voltage}}
          </td>
      </tr>
    </table>
 </div>
</template>
<script>
export default {
  props: {
    'isShow': 'boolean'
  },
  data () {
    return {
       postlist:[
        {
          voltageA:222,
          voltageB:199,
          voltageC:200,
          currentA:15,
          currentB:16,
          currentC:17,
          yespower:20,
          nopower:15,
          apparent:55,
          consumption:15,
          factor:25
          }
       ],
       tableData:[
          {
            name:"有功功率(KW)",
            value:"15"
          },
          {
            name:"无功功率(KVAR)",
            value:"15"
          },
          {
            name:"视在功率(KVR)",
            value:"15"
          },
          {
            name:"顺时耗电量(KW/H)",
            value:"15"
          },
          {
            name:"功率因数",
            value:"15"
          }
       ],
      tableData1:[
          {
            name:"A相",
            Voltage:'220',
            current:'50'
          },
          {
            name:"B相",
            value:"15",
            Voltage:'220',
            current:'50'
          },
          {
            name:"C相",
            value:"15",
            Voltage:'220',
            current:'50'
          }
       ]
    }
  },
  computed: {

  },
  methods: {
    closeMyself () {
      this.$emit('on-close')
    }
  },
  created(){
  }
}
</script>
<style scoped>
.table-box{
  border-radius:3px;
  overflow:hidden;
  border-left: 1px solid #ebeef5;
  border-top:1px solid #ebeef5;
  border-bottom:0px;
  margin-top: 20px;
  margin-bottom: 20px;
}
table{
  width: 100%;
  border: 0px;
  border-collapse:collapse;
  border-radius: 10px;
  border-radius: 10px;
}
table td{
  max-width: 80px;
  height: 30px;
  text-align: center;
  padding: 5px 0px;
  border-right: 1px solid #ebeef5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
table tr{
  height: 30px;
  overflow: hidden;
  background: #ffffff;
  border-bottom: 1px solid #ebeef5;
}
table tr.active{
  background: #ff4949;
}
table tr.active td{
  color: #fff;
}
</style>
